import { FC } from "react"
import Image from "next/image"
import Link from "next/link"

const FooterNav: FC = () => {
  return (
    <div className="bg-gradient-to-br from-[#2562a9] from-0% via-40% via-[#195db0] to-[#0C4E99] to-80%">
      <div className="w-[1650px] max-1650:w-auto mx-auto px-[10px] md:px-[20px] max-1650:px-[20px]">
        <div className="flex items-center justify-between pb-[20px] lg:pb-[42px] pt-[20px] lg:pt-[54px] border-b border-white/30 mb-[20px] md:mb-[70px]">
          <div className="w-[270px] lg:w-[340px] h-[28px] lg:h-[35px] relative">
            <Image src="/images/footer-logo.png" alt="logo" fill className="object-contain brightness-0 invert" />
          </div>
          <div className="hidden md:block md:text-base lg:text-[24px] leading-[24px] text-white">大学多元升学教育平台 /  11年坚守大学升学规划</div>
        </div>
        <div className="flex justify-between flex-col lg:flex-row pb-[10px] md:pb-[58px] border-b border-white/30">
          <div className="space-y-[10px] md:space-y-[30px] mb-[20px] md:mb-[30px] lg:mb-0">
            <p className="text-white text-base md:text-[20px] font-bold pb-[15px] md:pb-[20px] lg:pb-[30px] md:leading-[20px] relative before:absolute before:bottom-0 before:left-0 before:w-[25px] before:h-[3px] before:bg-[#BFE0F9] before:rounded-sm">快捷链接</p>
            <ul className="text-[#BFE0F9] text-sm md:text-[18px] space-y-[10px] md:space-y-[20px] lg:space-y-[30px] leading-[18px]">
              <li><Link href="/">中国研究生招生信息网</Link></li>
              <li><Link href="/">中国教育考试网</Link></li>
              <li><Link href="/">教育部学位与研究生教育发展中心</Link></li>
              <li><Link href="/">保研论坛</Link></li>
            </ul>
          </div>
          <div className="space-y-[10px] md:space-y-[30px] mb-[20px] md:mb-[30px] lg:mb-0">
            <p className="text-white text-base md:text-[20px] font-bold pb-[15px] md:pb-[20px] lg:pb-[30px] md:leading-[20px] relative before:absolute before:bottom-0 before:left-0 before:w-[25px] before:h-[3px] before:bg-[#BFE0F9] before:rounded-sm">产品与服务</p>
            <ul className="text-[#BFE0F9] text-sm md:text-[18px] space-y-[10px] md:space-y-[20px] lg:space-y-[30px] leading-[18px]">
              <li><Link href="/">上海(总部):杨浦区政立路497号国正中心1号楼</Link></li>
              <li><Link href="/">北京:海淀区中关村南大街2号院1号楼数码大厦A座</Link></li>
              <li><Link href="/">武汉:洪山区高新大道221号泷悦国际大厦1701</Link></li>
            </ul>
          </div>
          <div>
            <p className="text-white text-base md:text-[20px] font-bold pb-[15px] md:pb-[20px] lg:pb-[30px] mb-[10px] md:mb-[30px] md:leading-[20px] relative before:absolute before:bottom-0 before:left-0 before:w-[25px] before:h-[3px] before:bg-[#BFE0F9] before:rounded-sm">联系我们</p>
            <ul className="flex items-center  gap-[10px] md:gap-[30px]">
              <li>
                <div className="size-[92px] relative mb-[10px] md:mb-[20px]">
                  <Image src="/images/footer_qrcode1.png" alt="wechat" fill className="object-contain" />
                </div>
                <p className="text-[#BFE0F9] text-sm md:text-[16px] text-center leading-[16px]">保研人公众号</p>
              </li>
              <li>
                <div className="size-[92px] relative mb-[10px] md:mb-[20px]">
                  <Image src="/images/footer_qrcode2.png" alt="wechat" fill className="object-contain" />
                </div>
                <p className="text-[#BFE0F9] text-sm md:text-[16px] text-center leading-[16px]">保研人小程序</p>
              </li>
              <li>
                <div className="size-[92px] relative mb-[10px] md:mb-[20px]">
                  <Image src="/images/footer_qrcode3.png" alt="wechat" fill className="object-contain" />
                </div>
                <p className="text-[#BFE0F9] text-sm md:text-[16px] text-center leading-[16px]">扫码下载APP</p>
              </li>
            </ul>
          </div>
        </div>
        <div className="text-[#BFE0F9] text-xs md:text-[18px] text-center py-[10px] md:py-[30px]">
          Copyright © 2024 上海经毅管通教育科技有限公司提供技术支持 沪ICP备2021002148号-1
        </div>
      </div>
    </div>
  )
}

export default FooterNav
